Visual Studio CodeにJavaScript開発環境を構築する
導入するもの
トランスパイラ―
リンター、フォーマッター
モジュールバンドラー
code:sh
npm install --save-dev typescript
code:sh
tsc --init
code:tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": [
"./ts/**/*.ts"
]
}
VSCode拡張機能
code:settings.json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
インストール
code:sh
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin \
prettier eslint-config-prettier eslint-plugin-prettier
設定ファイル
code:.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:prettier/recommended",
"prettier/@typescript-eslint"
],
"plugins": [
"@typescript-eslint"
],
"parser": "@typescript-eslint/parser",
"env": {
"browser": true,
"node": true,
"es6": true
},
"parserOptions": {
"sourceType": "module"
},
"rules": {
"max-len": [
"error",
{
"code": 100
}
],
"prefer-promise-reject-errors": [
"off"
],
"no-return-assign": [
"off"
],
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/array-type": [
"error",
{
"default": "array-simple"
}
]
}
}
code:.prettierrc
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5"
}
参考